<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Spritely 0.5 Examples</title>
	<meta name="keywords" content="" />
	<meta name="generator" content="ArchimedesCMS from Artlogic - http://www.artlogic.net/" />
	<meta name="viewport" content="width = 320" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	
	<link rel="stylesheet" type="text/css" href="styles/main.css" />
	
	<style type="text/css">
		#stage {
			top: 0px;
			left: 0px;
			z-index: 100;
		}
		.stage {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			min-width: 900px;
			height: 359px;
			overflow: hidden;
		}
		#bg {
			background: #aedfe5 url(images/sky1.png) 0 0 repeat-x;
		}
		#clouds {
			background: transparent url(images/cloud.png) 305px 102px repeat-x;
		}
		#hill2 {
			background: transparent url(images/hill2.png) 0 258px repeat-x;
		}
		#hill1 {
			background: transparent url(images/hill-with-windmill.png) 0 104px repeat-x;
		}
		
		#bird {
			background: transparent url(images/bird-forward-back.png) 0 0 no-repeat;
			position: absolute;
			top: 150px;
			left: 65px;
			width: 180px;
			height: 123px;
			z-index: 2000;
			cursor: pointer;
		}
	</style>
	
	<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="scripts/jquery-ui-1.7.2.spritely.custom.min.js" type="text/javascript"></script>
	<script src="scripts/jquery.spritely-0.5.js" type="text/javascript"></script>

	<script type="text/javascript">
	
		(function($) {
			$(document).ready(function() {
				
				$('#logo').click(function() {
					document.location.href = 'http://www.spritely.net/';
				});
					
				var direction = 'left';
				
				// The bird should be locked to #hill2
				// and scroll across the screen.
				$('#bird')
					.sprite({fps: 9, no_of_frames: 3})
					.lockTo('#hill2', {
						'left': 380,
						'top': -60,
						'bg_img_width': $(document).width()
					})
					.spState(2);

				$('#clouds').pan({fps: 30, speed: 0.7, dir: direction, depth: 10});
				$('#hill2').pan({fps: 30, speed: 2, dir: direction, depth: 30});
				$('#hill1').pan({fps: 30, speed: 3, dir: direction, depth: 70});
				$('#hill1, #hill2, #clouds').spRelSpeed(8);
				
			});
		})(jQuery);
	
	</script>
</head>
<body>
<div id="container">
	<div id="stage" class="stage">
		<div id="tap" class="stage"></div>
		<div id="bg" class="stage"></div>
		<div id="clouds" class="stage"></div>
		<div id="hill2" class="stage"></div>
		<div id="hill1" class="stage"></div>
		<div id="logo">Spritely</div>
		<div id="bird"></div>
	</div>
	
	<div id="debugarea">
		
	</div>
	
	<div id="mainContent">
		<h2>Spritely 0.5 - locking a sprite's position relative to a background element.</h2>
		<p>To lock a sprite's position to the position of a background element, use the new <strong>'lockTo'</strong> method
		introducted in Spritely version 0.3.<br /><br />
		This Method needs the ID of the element it should be locked to, and the following three parameters:<br /><br />
		<ul>
			<li><strong>'left'</strong>: the sprite's left position relative to the background image's top left corner</li>
			<li><strong>'top'</strong>: the sprite's top position relative to the background image's top left corner</li>
			<li><strong>'bg_img_width'</strong>: the width of the the background image (required)</li>
		</ul>
		<br />
		E.g., to lock the '#bird' sprite to the '#hill2' background element
		(as in the source code of this example), do the following:
		
		</p>
		<pre>$('#bird')
	.sprite({fps: 9, no_of_frames: 3})
	.lockTo('#hill2', {
		'left': 380,
		'top': -60,
		'bg_img_width': $(document).width()
	});
	</pre>
	
	<p>You may also, optionally, set the interval (in milliseconds) that the position should be updated. By default this is
		20 milliseconds. To alter the interval, in milliseconds, do the following:</p>
	
		<pre>$('#bird')
	.sprite({fps: 9, no_of_frames: 3})
	.lockTo('#hill2', {
		'left': 380,
		'top': -60,
		'bg_img_width': $(document).width(),
		'interval': 40
	});</pre>
	<br />
	<p>Make sure you position each element on the page in the order you wish them to be layered, or use the 
	css 'z-index' property to set their positions.</p>
	
	
	</div>
</div>

</body>
</html>

